<div class="clue" style="color: red; padding: 0px 0px 10px 0px;">
    【操作提示】修改完成后，请点击“保存列表”按钮。<br/>
    【操作提示】等级=99为超级管理员。<br/>
    【操作提示】等级50~98为后台管理员，数字越大权限越高。<br/>
    【操作提示】等级49固定为代理组用户。
</div>

<!--列表-->
<table class="am-table am-table-bordered am-table-radius am-table-striped">
    <thead>
        <tr>
            <th width="100px">等级</th>
            <th>角色名称</th>
            <th width="80px">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<div class="button_line">
    <button class="am-btn am-btn-primary btn-add admin_button">新增</button>
    <button class="am-btn am-btn-primary btn-save admin_button">保存列表</button>
</div>

<script>
    var idNames = [];
    for (var i = 98; i > 49; i--) {
        var d = Rights.roles[i + ''];
        if (!d) continue;
        idNames.push({
            id: i,
            name: d,
        });
    }
    fillRoles();

    function fillRoles() {
        var table = $(".am-table tbody");
        table.empty();
        table.append('<tr><td> 99 </td><td>超级管理员</td><td> </td>');
        table.append('<tr><td> 49 </td><td>代理</td><td> </td>');
        for (var i in idNames) {
            var info = idNames[i];
            var tr = $("<tr></tr>");
            tr.append('<td><input type="number" class="empty_input id" placeholder="输入角色等级" value="__v__"/></td>'.replace(/__v__/, info.id));
            tr.append('<td><input type="text" class="empty_input name" placeholder="输入角色名称" value="__v__"/></td>'.replace(/__v__/, info.name));
            
            tr.append('<td><button class="btn-delete" value="__v__">删除</button></td>'.replace(/__v__/, i));
            table.append(tr);
        }

        $(".btn-delete").click(function(e) {
            var index = parseInt($(e.currentTarget).attr("value"));
            idNames.splice(index, 1);
            fillRoles();
        });
    }

    function saveBack() {
        // 回写数据
        var ids = $("input.id"), names = $("input.name");
        for (var i = 0; i < ids.length; i++) {
            idNames[i] = {
                id: parseInt($(ids[i]).val()),
                name: $(names[i]).val().trim(),
            };
        }
    }

    $(".btn-add").click(function() {
        saveBack();
        idNames.push({
            id: 0,
            name: "",
        });
        fillRoles();
    });
    $(".btn-save").click(function() {
        saveBack();
        var map = {};
        for (var i in idNames) {
            var id = idNames[i].id;
            if (id <= 49 || id >= 99) {
                alert2("角色等级的取值范围为：50-98，请修改！", true);
                return;
            }

            if (!idNames[i]) {
                alert2("角色名称不允许为空！", true);
                return;
            }

            if (map[id + ""]) {
                alert2("角色等级重复了，请修改！", true);
                return;
            }
            map[id + ""] = idNames[i].name;
        }

        startLoading();
        Classify.saveExt("roles", "idname", map, function() {
            stopLoading();
            alert2("保存成功！");
        })
    });
</script>
